
<template>
  <div
    class="circle-progress"
    
  >
    <svg
      :width="props.size + 'px'"
      :height="props.size + 'px'"
      :viewBox="`0 0 ${props.size * 1.2} ${props.size * 1.2}`"
    >
      <circle
        class="progress-ring__circle"
        style="opacity: 0.5"
        :stroke="props.color"
        :stroke-width="strokeWidth"
        fill="transparent"
        :cx="props.size * 0.6"
        :cy="props.size * 0.6"
        :r="radius"
      />
      <circle
        class="progress-ring__circle"
        :stroke="props.color"
        :stroke-width="props.strokeWidth"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="offset"
        fill="transparent"
        :cx="props.size * 0.6"
        :cy="props.size * 0.6"
        :r="radius"
        stroke-linecap="round"
      />
    </svg>
  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";

const props = defineProps({
  size: {
    type: Number,
    default: 100,
  },
  progress: {
    type: Number,
    default: 30,
    validator: (value) => value >= 0 && value <= 100,
  },
  strokeWidth: {
    type: Number,
    default: 10,
  },
  color: {
    type: String,
    default: "#2B74FF",
  },
});

const radius = computed(() => props.size / 2);
const circumference = computed(() => 2 * Math.PI * radius.value);
const offset = computed(
  () => ((100 - props.progress) / 100) * circumference.value
);
</script>

<style scoped>
.circle-progress {
  display: inline-block;
}

.progress-ring__circle {
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
</style>
